<template>
    <p>组合式api写法</p>
    <p>count:{{ count }}</p>
    <p>test:{{ test }}</p>
  
    <p>reactive写法=======</p>
    <p>obj:{{ obj }}</p>
    <p>obj.name:{{ obj.name }}</p>
    <p>obj.age:{{ obj.age }}</p>
    <p>arr:{{ arr }}</p>
    <p>arr[0]:{{ arr[0] }}</p>
  
    <p>computed</p>
    <p>countAddFive:{{ countAddFive }}</p>
  
    <p>methods====</p>
    <button @click="countAddOne">count+1</button>
    <button @click="countAddTwo">count+2</button>
    <button @click="updateObj">更新obj</button>
  
    <p>组件</p>
    <Son :foo="obj.name" :age="obj.age" />
  </template>
  
  <script>
  import { ref, reactive, computed, watch } from 'vue'
  import Son from './Son.vue'
  export default {
  
    components:{
      Son
    },
    setup() {
      // 定义 data
      const count = ref(0)
      const test = ref('hello wolrd')
  
      console.log(count.value);
  
      const obj = reactive({
        name: 'tom',
        age: 12
      })
      const arr = reactive([0, 1, 2])
  
      console.log(obj.name);
  
      const countAddFive = computed(() => {
        return count.value + 5
      })
  
      // methods
      function countAddOne() {
        count.value++
      }
  
      const countAddTwo = () => {
        count.value += 2
      }
  
      const updateObj = () => {
        updateObjName()
      }
  
      const updateObjName = () => {
        obj.name = 'jerry'
      }
  
      // watch
      watch(count, (newVal, oldVal) => {
        console.log('newVal', newVal);
        console.log('oldVal', oldVal);
      })
  
      watch(countAddFive, (newVal, oldVal) => {
        console.log('newVal', newVal);
        console.log('oldVal', oldVal);
      })
  
  
      return {
        count,
        test,
        obj,
        arr,
        countAddFive,
        countAddOne,
        countAddTwo,
        updateObj
      }
    }
  }
  
  </script>